<template>
	<div id="participate">
		<div class="header">
			<div class="icon-left" @click="back"><img src="../../../static/img/icon/release_icon/return@2x.png"/></div>
			<div>发布话题</div>
			<div class="submit" @click="submit">发布</div>
		</div>
		<div class="header-null"></div>
		<div class="choice" @click="titleShow">
			<div>选择话题</div>
			<div v-if="info.t_name" style="color: red;">#{{info.t_name}}#</div>
			<div>
				<img src="../../../static/img/icon/find_icon/add.png"/>
			</div>
		</div>
		<div class="updata">
			<div class="num">({{title.length}}/32)</div>
			<input type="" name="" id="" value="" placeholder="请输入标题" maxlength="32" v-model="title"/>
		</div>
		<div class="updata">
			<div class="num">({{content.length}}/280)</div>
			<textarea name="" rows="4" cols="" placeholder="请输入内容" maxlength="280" v-model="content"></textarea>
			<div class="updata-img">
				<div class="imgs" v-for="(item, index) in imgs">
					<img :src="item"/>
					<img src="../../../static/img/icon/denglu_gengxin_icon/guanbi@3x.png" @click="deleted(index)"/>
				</div>
				<div>
					<img src="../../../static/img/icon/my_icon/camera@3x.png"/>
					<input type="file" @change="fileImg($event)"/>
				</div>
			</div>
		</div>
		<search-title :dialog="show" :id="id" :list="list" @hide="hide" @success="success" @search="search" @pullupRefresh="pullupRefresh" @pulldownRefresh="pulldownRefresh"></search-title>
	</div>
</template>

<script>
	import {getData} from '../../service/getData'
	import searchTitle from '../../base/search'
	export default {
		data() {
			return {
				title: '',
				content: '',
				imgs: [],
				show: false,
				list: [],
				info: {},
				id: '#participateScroll',
				lastPage: 1,
				page: 1,
				name: ''
			}
		},
		components: {
			searchTitle
		},
		methods: {
			back() { //返回
				var _this = this
				mui.confirm('帖子尚未发布,是否确定返回',['取消','确定'],function(status) {
					if(status.index == 1) {
						_this.$router.goBack()
					}
				},'div')
			},
			hide() { //隐藏
				this.show = false
			},
			success(item) {  //选择话题
				this.info = item
			},
			titleShow() { //话题数据
				this.show = true
				getData('/topic/appFindAppTopic', {
					pn: 1
				}).then(d => {
					this.list = d.pageInfo.list
					this.lastPage = d.pageInfo.lastPage
				})
			},
			fileImg(ev) { //选择图片
				var _this = this
				var reader = new FileReader();
				reader.readAsDataURL(ev.target.files[0]);
				reader.onload=function(e) {
			        _this.imgs.push(e.target.result);
			    };
			},
			search(name) { //搜索话题
				this.name = name
				getData('/topic/appFindAppTopic', {
					pn: this.page,
					t_name: name
				}).then(d => {
					this.list = d.pageInfo.list
					this.lastPage = d.pageInfo.lastPage
				})
			},
			deleted(index) { //删除图片
				this.imgs.splice(index, 1)
			},
			pullupRefresh() {  //上拉加载
				mui(this.id).pullRefresh().endPullupToRefresh();
				if(this.lastPage != this.page) {
					getData('/topic/appFindAppTopic', {
						pn: this.page++,
						t_name: this.name
					}).then(d => {
						this.list = this.list.concat(d.pageInfo.list)
					})
				}
			},
			pulldownRefresh() {  //下拉刷新
				getData('/topic/appFindAppTopic', {
					pn: 1,
					t_name: this.name
				}).then(d => {
					mui(this.id).pullRefresh().endPulldownToRefresh();
					this.list = d.pageInfo.list
					this.lastPage = d.pageInfo.lastPage
				})
			},
			submit() {  //发布
				if(this.title == '' || this.content == '' || this.imgs.length == 0 ) {
					mui.toast('有一项为空,请再次填写')
				} else {
					let imgs = ''
					this.imgs.map(x => {
						imgs = x.split(',')[1] + ','
					})
					getData('/childtopic/addChildTopicApi', {
						topicId: this.info.topic_id,
						topicPicture: imgs,
						topicName: this.title,
						topicContent: this.content,
						token: sessionStorage.token
					}).then(d => {
						if(d.code == 1) {
							mui.toast(d.msg)
							this.$router.go(-2)
						}
					})					
				}
			}
		}
	}
</script>

<style scoped lang="less">
	#participate {
		background: #fff;
	}

	.choice {
		display: flex;
		justify-content: space-between;
		padding: 10px;
		align-items: center;
		background: #fff;
		
		img {
			width: 20px;
			height: 20px;
		}
		
		div {
			display: flex;
			align-items: center;
		}
	}
	
	.updata {
		padding: 5px 10px;
		background: #fff;
		border-top: 1px solid #eee;
		
		.num {
			width: 100%;
			text-align: right;
		}
		
		input, textarea {
			font-size: 13px;
			width: 100%;
			margin: 0;
			padding: 0;
		}
		
		.imgs {
			position: relative;
			
			img:last-child {
				position: absolute;
				right: -8px;
				top: -5px;
				width: 18px;
				height: 18px;
			}
		}
		
		.updata-img {
			display: flex;
			flex-wrap: wrap;
			
			div {
				position: relative;
			}
			
			input {
				position: absolute;
				left: 0;
				width: 80px;
				top: 0;
				height: 80px;
				opacity: 0;
			}
		}
		
		img {
			width: 80px;
			height: 80px;
			margin-right: 10px;
			margin-bottom: 10px;
		}
	}
</style>